{% extends "base.html" %}

{% block title %}Add Disease - Admin Panel{% endblock %}

{% block content %}
<div class="container-fluid px-2 px-md-3 py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10">
            <div class="card qc-admin-card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-header qc-admin-card__header border-0 text-center py-4">
                    <h3 class="mb-0">
                        <i class="fas fa-disease me-2"></i>Add New Disease Information
                    </h3>
                    <p class="mb-0 mt-2 text-muted small">Help patients by adding comprehensive disease information</p>
                </div>
                <div class="card-body p-5">
                    <form method="POST" id="disease-form">
                        {{ form.hidden_tag() }}

                        <!-- Basic Information -->
                        <div class="mb-4">
                            <h4 class="mb-3">Basic Information</h4>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    {{ form.name.label(class="form-label") }}
                                    {{ form.name(class="form-control") }}
                                    {% if form.name.errors %}
                                        <div class="text-danger small mt-1">{% for error in form.name.errors %}{{ error }}{% endfor %}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    {{ form.category.label(class="form-label") }}
                                    {{ form.category(class="form-select") }}
                                    {% if form.category.errors %}
                                        <div class="text-danger small mt-1">{% for error in form.category.errors %}{{ error }}{% endfor %}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    {{ form.severity_level.label(class="form-label") }}
                                    {{ form.severity_level(class="form-select") }}
                                    {% if form.severity_level.errors %}
                                        <div class="text-danger small mt-1">{% for error in form.severity_level.errors %}{{ error }}{% endfor %}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    {{ form.age_group.label(class="form-label") }}
                                    {{ form.age_group(class="form-select") }}
                                    {% if form.age_group.errors %}
                                        <div class="text-danger small mt-1">{% for error in form.age_group.errors %}{{ error }}{% endfor %}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    {{ form.gender_preference.label(class="form-label") }}
                                    {{ form.gender_preference(class="form-select") }}
                                    {% if form.gender_preference.errors %}
                                        <div class="text-danger small mt-1">{% for error in form.gender_preference.errors %}{{ error }}{% endfor %}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <h4 class="mb-3">Description</h4>
                            {{ form.description.label(class="form-label") }}
                            {{ form.description(class="form-control", rows="4") }}
                            {% if form.description.errors %}
                                <div class="text-danger small mt-1">{% for error in form.description.errors %}{{ error }}{% endfor %}</div>
                            {% endif %}
                        </div>

                        <!-- Symptoms -->
                        <div class="mb-4">
                            <h4 class="mb-3">Symptoms</h4>
                            {{ form.symptoms.label(class="form-label") }}
                            {{ form.symptoms(class="form-control", rows="4") }}
                            {% if form.symptoms.errors %}
                                <div class="text-danger small mt-1">{% for error in form.symptoms.errors %}{{ error }}{% endfor %}</div>
                            {% endif %}
                        </div>

                        <!-- Causes -->
                        <div class="mb-4">
                            <h4 class="mb-3">Causes</h4>
                            {{ form.causes.label(class="form-label") }}
                            {{ form.causes(class="form-control", rows="4") }}
                            {% if form.causes.errors %}
                                <div class="text-danger small mt-1">{% for error in form.causes.errors %}{{ error }}{% endfor %}</div>
                            {% endif %}
                        </div>

                        <!-- Prevention -->
                        <div class="mb-4">
                            <h4 class="mb-3">Prevention</h4>
                            {{ form.prevention.label(class="form-label") }}
                            {{ form.prevention(class="form-control", rows="4") }}
                            {% if form.prevention.errors %}
                                <div class="text-danger small mt-1">{% for error in form.prevention.errors %}{{ error }}{% endfor %}</div>
                            {% endif %}
                        </div>

                        <!-- Treatment -->
                        <div class="mb-4">
                            <h4 class="mb-3">Treatment</h4>
                            {{ form.treatment.label(class="form-label") }}
                            {{ form.treatment(class="form-control", rows="4") }}
                            {% if form.treatment.errors %}
                                <div class="text-danger small mt-1">{% for error in form.treatment.errors %}{{ error }}{% endfor %}</div>
                            {% endif %}
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                            <a href="{{ url_for('admin.diseases') }}" class="btn btn-outline-secondary me-md-2">
                                <i class="fas fa-arrow-left me-1"></i>Cancel
                            </a>
                            {{ form.submit(class="btn btn-primary btn-lg") }}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.form-label {
    font-weight: 600;
    color: var(--gray-700);
}

.form-control, .form-select {
    border: 1px solid var(--gray-300);
    border-radius: 8px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
}

.card {
    border-radius: 12px;
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
}
</style>
{% endblock %}